<template>
  <div>
    <sys-dialog
      :title="addDialog.title"
      :width="addDialog.width"
      :height="addDialog.height"
      :visible="addDialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm">
      <div slot="content">
        <el-form
          :model="addMenuModel"
          ref="addMenuRef"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small">
          <!-- el-row
        代表的是把子元素排成一行 一行分为24等分
         -->
          <el-row>
            <el-col :span="24">
              <el-form-item prop="type" label="菜单类型">
                <el-radio-group v-model="addMenuModel.type">
                  <el-radio :label="'0'">目录</el-radio>
                  <el-radio :label="'1'">菜单</el-radio>
                  <el-radio :label="'2'">按钮</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="parentName" size="small" label="上级菜单">
            <el-input
              @click.native="selectParent"
              v-model="addMenuModel.parentName"></el-input>
          </el-form-item>
          <el-form-item prop="label" size="small" label="菜单名称">
            <el-input v-model="addMenuModel.label"></el-input>
          </el-form-item>
          <el-form-item
            v-if="addMenuModel.type != '2'"
            size="small"
            label="菜单图标">
            <el-input v-model="addMenuModel.icon"></el-input>
          </el-form-item>
          <el-form-item
            prop="name"
            v-if="addMenuModel.type == '1'"
            size="small"
            label="路由名称">
            <el-input v-model="addMenuModel.name"></el-input>
          </el-form-item>
          <el-form-item
            prop="path"
            v-if="addMenuModel.type != '2'"
            size="small"
            label="路由地址">
            <el-input v-model="addMenuModel.path"></el-input>
          </el-form-item>
          <el-form-item
            prop="url"
            v-if="addMenuModel.type == '1'"
            size="small"
            label="组件路径">
            <el-input v-model="addMenuModel.url"></el-input>
          </el-form-item>
          <el-form-item prop="code" size="small" label="权限字段">
            <el-input v-model="addMenuModel.code"></el-input>
          </el-form-item>
          <el-form-item size="small" label="菜单序号">
            <el-input v-model="addMenuModel.orderNum"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </sys-dialog>
    <Parent ref="parentRef" @NodeClick="NodeClick"></Parent>
  </div>
</template>

<script>
import SysDialog from '@/components/system/SysDialog.vue'
import Parent from './parent.vue'
export default {
  components: {
    SysDialog,
    Parent
  },
  data() {
    return {
      // 新增或编辑弹框属性
      addDialog: {
        title: '',
        width: 630,
        height: 260,
        visible: false
      },
      // 新增或编辑表单数据域
      addMenuModel: {
        id: '',
        editType: '', // 0 :新增 1：编辑
        type: '',
        parentId: '',
        parentName: '',
        label: '',
        icon: '',
        name: '',
        path: '',
        url: '',
        code: '',
        orderNum: ''
      },
      // 新增或编辑表单验证规则
      rules: {
        type: [
          {
            required: true,
            trigger: 'change',
            message: '请选择菜单类型'
          }
        ],
        parentName: [
          {
            required: true,
            trigger: 'change',
            message: '请选择上级菜单'
          }
        ],
        label: [
          {
            required: true,
            trigger: 'change',
            message: '请填写菜单名称'
          }
        ],
        name: [
          {
            required: true,
            trigger: 'change',
            message: '请填写路由名称'
          }
        ],
        path: [
          {
            required: true,
            trigger: 'change',
            message: '请填写路由路径'
          }
        ],
        url: [
          {
            required: true,
            trigger: 'change',
            message: '请填写组件路径'
          }
        ],
        code: [
          {
            required: true,
            trigger: 'change',
            message: '请填写权限字段'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    show(type, row) {
      // 清空表单和数据
      this.$resetForm('addMenuRef', this.addMenuModel)
      if (type === '0') {
        this.addDialog.title = '新增权限'
      } else {
        this.addDialog.title = '编辑权限'
        this.$objCoppy(row, this.addMenuModel)
      }
      this.addDialog.visible = true
      this.addMenuModel.editType = type
    },
    // 新增或编辑确认
    onConfirm() {
      this.$refs.addMenuRef.validate(async (valid) => {
        if (valid) {
          this.$emit('onConfirm', this.addMenuModel)
          this.addDialog.visible = false
        }
      })
    },
    // 新增或编辑取消
    onClose() {
      this.$resetForm('addMenuRef', this.addMenuModel)
      this.addDialog.visible = false
    },
    // 点击选择上级菜单
    async selectParent() {
      // console.log('查父级')
      this.$refs.parentRef.show()
    },
    NodeClick(data) {
      console.log('传回来的数据', data)
      this.addMenuModel.parentId = data.id
      this.addMenuModel.parentName = data.label
    }
  }
}
</script>
<style lang="less" scoped></style>
